<template>
	<div class="main">
		<div class="container">
			<!-- 黄金广告区 -->
			<div class="gold-adv mb20">
				<img src="@/assets/img/adv01.jpg" id="adv">
				<!-- 静态的处理(html+css): 加三个圆圈圈按钮, 用于切换图片内容 -->
				<div class="adv-button-box">
					<span id="adv01" class="active"></span>
					<span id="adv02"></span>
					<span id="adv03"></span>
				</div>
			</div>
			<!-- 热门商品 -->
			<div class="module mb20">
				<h3>热门商品</h3>
				<ul class="clearfix">
					<li @click="details(hotProduct.pid)" style="width: 50%;" v-for="hotProduct in hotProducts" :key="hotProduct.pid">
						<img :src="hotProduct.cover">
						<p>{{hotProduct.title}}</p>
						<p>{{hotProduct.sellPoint}}</p>
						<p>{{hotProduct.price}}</p>
					</li>
				</ul>
			</div>
			<!-- 新品速递 -->
			<div class="module mb20">
				<h3>新品速递</h3>
				<ul class="clearfix">
					<li @click="details(product.pid)" v-for="product in newProducts" :key="product.pid" :style="product.width">
						<img :src="product.cover">
						<p>{{product.title}}</p>
						<p>{{product.sellPoint}}</p>
						<p>{{product.price}}</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
				newProducts: [{

				}],
				hotProducts: [{
					pid: 123,
					title: "舒服了",
					sellPoint: "呵呵",
					cover: "xx",
					price: 123,
				}]
			}
		},
		created() {
			// Ajax code.
			this.axios.get('/product/news')
				.then(response => {
					this.newProducts = response.data.data;
					// 第一个商品,给它来点特别的属性
					this.newProducts[0].width = "width:50%";
					// document.get.....li[0].style.width="50%";
				}),
				this.axios.get('/product/hots')
				.then(response => {
					this.hotProducts = response.data.data;
					// 第一个商品,给它来点特别的属性
				})
		},
		methods: {
			details(pid) {
				this.$router.push({
					name: 'Details',
					query: {
						pid: pid
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.gold-adv {
		height: 500px;
		/* 把gold-adv作为adv-button-box的定位参照物 */
		position: relative;
	}

	.gold-adv img {
		height: 500px;
		width: 100%;
	}

	.silver-adv>ul>li {
		float: left;
		width: 25%;
	}

	.silver-adv>ul>li img {
		width: 100%;
		height: 200px;
	}

	/* 把三个圆圈圈的位置定在黄金广告区的下方中间 */
	.adv-button-box {
		/* 绝对坐标定位 */
		position: absolute;
		bottom: 10px;
		left: 50%;
		margin-left: -34px;
		opacity: 0.5;
	}

	/* class="adv-button-box"的标签 内部的 span */
	.adv-button-box span {
		border: 1px solid #CCCCCC;
		width: 20px;
		height: 20px;
		display: inline-block;
		border-radius: 50%;
		text-align: center;
		background-color: #959595;
		cursor: pointer;
	}

	.adv-button-box span.active,
	.adv-button-box span:hover {
		background-color: #FFFFFF;
	}
</style>
